<script setup>
import { useRoute, useRouter } from "vue-router";
import { getActivityDetail, getActivityOrgs } from "@/api/activity";
import { onMounted, ref, onUnmounted } from "vue";
import { getDictTypes } from "@/api/dict";
import { useUserStore } from '~/stores/user'
const router = useRouter()
const route = useRoute()
import dayjs from 'dayjs'
import { getActivityRecommend } from "@/api/activity";
const userStore = useUserStore()
import CommunityList from '@/components/communityList.vue'

onMounted(() => {
  getDictTypesFun();
  getActivityDetailFun();
  getActivityRecommendFun();
  getActivityOrgsFun();
})

const activity_ticket_type = ref([])

const getDictTypesFun = async () => {
  getDictTypes({ types: 'activity_ticket_type' }).then(res => {
    activity_ticket_type.value = res.data.activity_ticket_type;
    console.log(activity_ticket_type.value)
  })
}

const activityOrgs = ref([])

//组织类型:ORGANIZER-主办方,GUIDE-指导单位,CO_ORGANIZER-协办方,SPONSOR-赞助商
const ORGANIZER = computed(() => {
  return activityOrgs.value?.filter(item => item.type === 'ORGANIZER')
})

const GUIDE = computed(() => {
  return activityOrgs.value?.filter(item => item.type === 'GUIDE')
})

const CO_ORGANIZER = computed(() => {
  return activityOrgs.value?.filter(item => item.type === 'CO_ORGANIZER')
})

const SPONSOR = computed(() => {
  return activityOrgs.value?.filter(item => item.type === 'SPONSOR')
})

const getActivityOrgsFun = async () => {
  getActivityOrgs(route.query.id).then(res => {
    console.log(res)
    activityOrgs.value = res.data;
  })
}

const hot = ref({
  startTime: '2025-04-01',
  city: '南京',
  viewCount: '1',
  favoriteCount: '1',
  likeCount: '1',
})
const details = ref({
  canSignup: true,
})

// 获取活动详情
const getActivityDetailFun = () => {
  getActivityDetail(route.query.id).then(res => {
    console.log(res)
    details.value = res.data;
    const startTimeMs = dayjs(details.value?.endTime).valueOf() * 1000;
    const nowMs = dayjs().valueOf();
    const distance = startTimeMs - nowMs;
    console.log(startTimeMs, nowMs, distance)
    if (distance < 0) {
      details.value.canSignup = false;
    } else {
      details.value.canSignup = true;
    }

    // 获取活动详情后启动倒计时
    startCountdown();
  })
}

// 倒计时相关变量
const countdown = ref({
  days: 0,
  hours: 0,
  minutes: 0,
  seconds: 0
})

let countdownTimer = null;

let showCountdownTimer = ref(false);

// 计算倒计时
const calculateCountdown = () => {
  if (!details.value.startTime) return;
  const startTimeMs = dayjs(details.value.startTime).valueOf() * 1000;
  const nowMs = dayjs().valueOf();
  console.log(startTimeMs, nowMs)
  const distance = startTimeMs - nowMs;
  console.log('distance', distance)
  if (distance < 0) {
    // 活动已开始
    countdown.value = {
      days: 0,
      hours: 0,
      minutes: 0,
      seconds: 0
    };
    clearInterval(countdownTimer);
    showCountdownTimer.value = false;
    return;
  } else {
    showCountdownTimer.value = true;
  }

  // 计算天、时、分、秒
  countdown.value.days = Math.floor(distance / (1000 * 60 * 60 * 24));
  countdown.value.hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  countdown.value.minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  countdown.value.seconds = Math.floor((distance % (1000 * 60)) / 1000);
}

// 启动倒计时
const startCountdown = () => {
  // 先计算一次
  calculateCountdown();
  // 每秒更新一次
  countdownTimer = setInterval(calculateCountdown, 1000);
}

// 组件卸载时清除定时器
onUnmounted(() => {
  if (countdownTimer) {
    clearInterval(countdownTimer);
  }
})

const signUp = () => {
  if (userStore.token) {
    router.push({ path: '/activity/signUp', query: { id: route.query.id } })
  } else {
    userStore.setShowLoginDialog(true);
  }
}

// 热门推荐
const hotRecommend = ref({
  id: '',
  title: ''
})

// 获取热门推荐
const getActivityRecommendFun = () => {
  getActivityRecommend({ 'exclude': route.query.id }).then(res => {
    console.log(res)
    if (res.suc) {
      hotRecommend.value = res.data?.[0];
    }
  })
}

const goDetails = (data) => {
  const targetRoute = router.resolve({ path: '/activity/activePage', query: { id: data.id } });
  window.open(targetRoute.href, '_blank');
}

</script>

<template>
  <div class="homePage-content active-details-page">
    <div class="left-activity-content">
      <div class="activity-info">
        <div class="activity-img">
          <img :src="details?.posterUrl" alt="">
        </div>
        <div class="activity-text">
          <div class="activity-text-title">{{ details?.title }}</div>
          <div class="hot-recommend" v-if="!showCountdownTimer && hotRecommend?.title">
            <div class="hot-recommend-title">{{ hotRecommend?.title }}</div>
            <div class="hot-recommend-skip-btn" @click="goDetails(hotRecommend)">立即报名</div>
          </div>
          <div class="activity-text-p">
            <i class="icon1"></i>
            <span>时间：
              <span>
                <DateConvert :date="details?.startTime" />
              </span>
              至
              <span>
                <DateConvert :date="details?.endTime" />
              </span>
            </span>
          </div>
          <div class="activity-text-p">
            <i class="icon2"></i>
            <span>地点：{{ details?.address }}</span>
          </div>
          <div class="activity-text-share-box">
            <span>分享到</span>
            <i class="share-icon1"></i>
            <i class="share-icon2"></i>
            <i class="share-icon3"></i>
          </div>
          <div class="activity-countdown" v-if="showCountdownTimer">
            <div class="count-down-icon"></div>
            <div class="count-down-title">
              开始倒计时
            </div>
            <div class="count-down-text">
              <span class="tips">距离开始: </span>
              <span class="num">{{ countdown.days }}</span>天<span class="num">{{ countdown.hours }}</span>时
              <span class="num">{{ countdown.minutes }}</span>分 <span class="num">{{ countdown.seconds }}</span>秒
            </div>
          </div>
          <!-- <div v-else  class="activity-countdown flex-center">
            <div class="count-down-text">
              <span class="tips">火热进行中 </span>
            </div>
          </div> -->
        </div>
      </div>
      <div class="activity-site" v-if="details?.activitySite && details?.canSignup">
        <div class="site-title">活动站点</div>
        <div class="site-list">
          <!--          <div class="site-card" v-for="(site,index) in details.activitySite" :key="index">{{site}}</div>-->
          <div class="site-card">{{ details?.activitySite }}</div>
        </div>
      </div>
      <div class="activity-site" v-if="details?.canSignup">
        <div class="site-title">活动票种</div>
        <div class="site-list">
          <div class="ticker-type">
            {{activity_ticket_type.filter(item => item.dictValue == details?.ticketType)[0]?.dictLabel}}
          </div>
        </div>
      </div>
      <div class="activity-submit">
        <div class="site-title">活动报名</div>
        <div class="activity-submit-button" @click="signUp" v-if="details?.isReg && details?.canSignup">已报名</div>
        <div class="activity-submit-button" @click="signUp" v-else-if="(!details?.isReg) && details?.canSignup">立即报名
        </div>
        <div class="activity-submit-button-disabled" v-else-if="!details?.canSignup">已结束</div>
        <div class="activity-advantage-list" v-if="details?.canSignup">
          <i class="yes-icon"></i>
          <div class="activity-advantage-span">
            <el-tooltip effect="dark" placement="top">
              <template #content>1.为保障您的资金安全，会先将您的付款资金托管到担保交易账户中，待您确定参加活动后，再从担保交易账户打款给活动主办方。
                <br />2.活动内容与服务由主办方提供，您报名的钱款最终结算给活动主办方。</template>
              交易保障
            </el-tooltip>
          </div>
          <i class="yes-icon"></i>
          <div class="activity-advantage-span">
            <el-tooltip effect="dark" placement="top">
              <template #content>1.如需退款，请于活动开始前的24小时之前提交申请，活动开始前的24小时内不接受退款。
                <br /> 2.退款时，将收取票价的0%作为手续费。</template>
              退款说明
            </el-tooltip>
          </div>

        </div>
      </div>
      <div class="activity-poster-box">
        <img :src="details?.detailUrl" alt="">
      </div>
    </div>
    <div class="right-activity-a-content">
      <div class="right-a-box" v-if="ORGANIZER.length > 0">
        <div class="right-a-box-title">
          <span>主办方</span>
        </div>
        <div class="sp-box-single" v-if="ORGANIZER.length === 1">
          <div class="sponsor-logo">
            <img :src="ORGANIZER[0]?.logo" alt="">
          </div>
          <div class="sp-info">
            {{ ORGANIZER[0]?.name }}
            <el-tooltip effect="dark" placement="top" style="width: 200px;">
              <template #content>
                <div>{{ ORGANIZER[0]?.name }}</div>
                <div style="width: 200px;">
                  {{ ORGANIZER[0]?.description }}
                </div>
              </template>
              <div class="sp-text line-clamp-2">
                {{ ORGANIZER[0]?.description }}
              </div>
            </el-tooltip>
          </div>
        </div>
        <template v-if="ORGANIZER.length > 1">
          <div class="sp-box-row" v-for="(item, index) in ORGANIZER" :key="index">
            <div class="sponsor-logo">
              <img :src="item.logo" alt="">
              <el-tooltip effect="dark" placement="top" style="width: 200px;">
                <template #content>
                  <div>{{ item.name }}</div>
                  <div style="width: 200px;">
                    {{ item.description }}
                  </div>
                </template>
                <div class="sp-text line-clamp-1">
                  {{ item.name }}
                </div>
              </el-tooltip>
            </div>
          </div>
        </template>
      </div>

      <div class="right-a-box" v-if="GUIDE.length > 0">
        <div class="right-a-box-title">
          <span>指导单位</span>
        </div>
        <div class="sp-box-single" v-if="GUIDE.length === 1">
          <div class="sponsor-logo">
            <img :src="GUIDE[0]?.logo" alt="">
          </div>
          <div class="sp-info">
            {{ GUIDE[0]?.name }}
            <el-tooltip effect="dark" placement="top" style="width: 200px;">
              <template #content>
                <div>{{ GUIDE[0]?.name }}</div>
                <div style="width: 200px;">
                  {{ GUIDE[0]?.description }}
                </div>
              </template>
              <div class="sp-text line-clamp-2">
                {{ GUIDE[0]?.description }}
              </div>
            </el-tooltip>
          </div>
        </div>
        <template v-if="GUIDE.length > 1">
          <div class="sp-box-row" v-for="(item, index) in GUIDE" :key="index">
            <div class="sponsor-logo">
              <img :src="item.logo" alt="">
              <el-tooltip effect="dark" placement="top" style="width: 200px;">
                <template #content>
                  <div>{{ item.name }}</div>
                  <div style="width: 200px;">
                    {{ item.description }}
                  </div>
                </template>
                <div class="sp-text line-clamp-1">
                  {{ item.name }}
                </div>
              </el-tooltip>
            </div>
          </div>
        </template>
      </div>
      <div class="right-a-box" v-if="CO_ORGANIZER.length > 0">
        <div class="right-a-box-title">
          <span>协办单位</span>
        </div>
        <div class="sp-box-single" v-if="CO_ORGANIZER.length === 1">
          <div class="sponsor-logo">
            <img :src="CO_ORGANIZER[0]?.logo" alt="">
          </div>
          <div class="sp-info">
            {{ CO_ORGANIZER[0]?.name }}
            <el-tooltip effect="dark" placement="top" style="width: 200px;">
              <template #content>
                <div>{{ CO_ORGANIZER[0]?.name }}</div>
                <div style="width: 200px;">
                  {{ CO_ORGANIZER[0]?.description }}
                </div>
              </template>
              <div class="sp-text line-clamp-2">
                {{ CO_ORGANIZER[0]?.description }}
              </div>
            </el-tooltip>
          </div>
        </div>
        <template v-if="CO_ORGANIZER.length > 1">
          <div class="sp-box-row" v-for="(item, index) in CO_ORGANIZER" :key="index">
            <div class="sponsor-logo">
              <img :src="item.logo" alt="">
              <el-tooltip effect="dark" placement="top" style="width: 200px;">
                <template #content>
                  <div>{{ item.name }}</div>
                  <div style="width: 200px;">
                    {{ item.description }}
                  </div>
                </template>
                <div class="sp-text line-clamp-1">
                  {{ item.name }}
                </div>
              </el-tooltip>
            </div>
          </div>
        </template>
      </div>

      <div class="right-a-box" v-if="SPONSOR.length > 0">
        <div class="right-a-box-title">
          <span>赞助单位</span>
        </div>
        <div class="sp-box-single" v-if="SPONSOR.length === 1">
          <div class="sponsor-logo">
            <img :src="SPONSOR[0]?.logo" alt="">
          </div>
          <div class="sp-info">
            {{ SPONSOR[0]?.name }}
            <el-tooltip effect="dark" placement="top" style="width: 200px;">
              <template #content>
                <div>{{ SPONSOR[0]?.name }}</div>
                <div style="width: 200px;">
                  {{ SPONSOR[0]?.description }}
                </div>
              </template>
              <div class="sp-text line-clamp-2">
                {{ SPONSOR[0]?.description }}
              </div>
            </el-tooltip>
          </div>
        </div>
        <template v-if="SPONSOR.length > 1">
          <div class="sp-box-row" v-for="(item, index) in SPONSOR" :key="index">
            <div class="sponsor-logo">
              <img :src="item.logo" alt="">
              <el-tooltip effect="dark" placement="top" style="width: 200px;">
                <template #content>
                  <div>{{ item.name }}</div>
                  <div style="width: 200px;">
                    {{ item.description }}
                  </div>
                </template>
                <div class="sp-text line-clamp-1">
                  {{ item.name }}
                </div>
              </el-tooltip>
            </div>
          </div>
        </template>
      </div>

      <div class="right-a-box" v-if="hotRecommend?.id">
        <div class="right-a-box-title">
          <span>热门活动</span>
          <span class="more-text" @click="goDetails(hotRecommend)">更多</span>
          <span class="more-icon"></span>
        </div>
        <div class="hot-activity-box">
          <div class="hot-img">
            <img :src="hotRecommend?.thumb" alt="">
          </div>
          <div class="hot-title">{{ hotRecommend?.title }}</div>
          <div class="active-info">
            <div class="info-item">
              <i class="icon1"></i>
              <DateConvert :date="hotRecommend?.startTime" />
            </div>
            <div class="info-item">
              <i class="icon2"></i>
              {{ hotRecommend?.city }}
            </div>
          </div>
          <div class="active-info-icon-list">
            <div class="icon3"></div>
            <span class="num">{{ hotRecommend?.viewCount }}</span>
            <div class="icon4"></div>
            <span class="num">{{ hotRecommend?.favoriteCount }}</span>
            <div class="icon5"></div>
            <span class="num">{{ hotRecommend?.likeCount }}</span>
            <div class="check-btn"></div>

            <div class="submit" @click="goDetails(hotRecommend)">立即报名</div>
          </div>
        </div>
      </div>
      <div class="right-a-box" v-if="false">
        <div class="right-a-box-title">
          <span>热门报告</span>
          <span class="more-text">更多</span>
          <span class="more-icon"></span>
        </div>
        <div class="hot-activity-box">
          <div class="hot-img">
            <img src="~/assets/images/test/ad3.png" alt="">
          </div>
          <div class="hot-title">《2024上半年度跨境电商调研报告》PDF下载</div>
          <div class="active-info">
            <div class="icon1"></div>
            <span>{{ hot.startTime }}</span>
            <div class="icon3" style="margin-left: auto"></div>
            <span class="num">{{ hot.viewCount }}</span>
            <div class="icon4"></div>
            <span class="num">{{ hot.favoriteCount }}</span>
            <div class="icon5"></div>
            <span class="num">{{ hot.likeCount }}</span>
            <div class="check-btn"></div>
          </div>
        </div>
        <div class="hot-activity-box" style="margin-top: 20px">
          <div class="hot-img">
            <img src="~/assets/images/test/ad2.png" alt="">
          </div>
          <div class="hot-title">《2024上半年度跨境电商调研报告》PDF下载</div>
          <div class="active-info">
            <div class="icon1"></div>
            <span>{{ hot.startTime }}</span>
            <div class="icon3" style="margin-left: auto"></div>
            <span class="num">{{ hot.viewCount }}</span>
            <div class="icon4"></div>
            <span class="num">{{ hot.favoriteCount }}</span>
            <div class="icon5"></div>
            <span class="num">{{ hot.likeCount }}</span>
            <div class="check-btn"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.left-activity-content {
  border-radius: 10px;
  background: #ffffff;
  flex: 1;
  padding: 20px;
  margin-bottom: 10px;

  @media screen and (max-width: 991px) {
    width: calc(100% - 40px);
  }

  .activity-info {
    display: flex;
    align-items: flex-start;

    @media screen and (max-width: 991px) {
      flex-direction: column;
    }

    .activity-img {
      width: 300px;
      aspect-ratio: 511 / 304;
      overflow: hidden;

      /* height: 304px; */
      @media screen and (max-width: 1300px) {
        /* height: 200px; */
      }

      @media screen and (max-width: 991px) {
        width: 100%;
      }

      img {
        width: 100%;
        height: 100%;
        object-fit: fill;
        border-radius: 10px;
      }
    }

    .activity-text {
      flex: 1;
      margin-left: 16px;
      display: flex;
      flex-direction: column;
      height: 100%;

      @media screen and (max-width: 991px) {
        margin-left: 0;
        margin-top: 10px;
      }

      .activity-text-title {
        font-size: 22px;
        font-weight: bold;
        line-height: 32px;
        color: #333333;
        margin-bottom: 10px;

        @media screen and (max-width: 1300px) {
          font-size: 20px;
          line-height: 22px;
          margin-bottom: 10px;
          display: none;
        }
      }

      .hot-recommend {
        display: flex;
        align-items: center;
        padding: 3px 8px;
        border-radius: 100px;
        width: 100%;
        margin-bottom: 10px;
        background: linear-gradient(90.26deg, #e9f0ff -1.15%, #fdfef9 35.54%, #f7fdfe 47.77%, #edf4ff 66.98%, #f9f3ff 108%);

        @media screen and (max-width: 991px) {}

        .hot-recommend-title {
          color: #2e4af7;
          font-size: 14px;
          font-weight: 600;
          width: 120px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          flex: 1;
        }

        .hot-recommend-skip-btn {
          color: #6f6fdb;
          font-size: 12px;
          margin-left: 10px;
          cursor: pointer;
          flex-shrink: 0;
        }
      }


      .activity-text-p {
        display: flex;
        align-items: flex-start;
        font-size: 16px;
        line-height: 14px;
        font-weight: normal;
        color: #999999;
        margin-top: 6px;

        @media screen and (max-width: 1500px) {
          font-size: 14px;
        }

        .icon1 {
          background: url("~/assets/images/activity/date-icon.png") no-repeat;
          width: 16px;
          height: 16px;
          margin-right: 8px;
          flex-shrink: 0;
          background-size: 100% 100%;
        }

        .icon2 {
          background: url("~/assets/images/activity/position-icon.png") no-repeat;
          width: 16px;
          height: 16px;
          margin-right: 8px;
          flex-shrink: 0;
          background-size: 100% 100%;
        }
      }

      .activity-text-share-box {
        display: flex;
        align-items: center;
        font-size: 18px;
        font-weight: normal;
        line-height: 28px;
        color: #999999;
        margin-top: 27px;

        @media screen and (max-width: 1300px) {
          margin-top: 10px;
        }

        .share-icon1 {
          background: url("~/assets/images/activity/share1.png") no-repeat;
          width: 28px;
          height: 23px;
          margin-right: 16px;
          margin-left: 16px;
          cursor: pointer;
        }

        .share-icon2 {
          background: url("~/assets/images/activity/share2.png") no-repeat;
          width: 28px;
          height: 22px;
          margin-right: 16px;
          cursor: pointer;
        }

        .share-icon3 {
          background: url("~/assets/images/activity/share3.png") no-repeat;
          width: 50px;
          height: 18px;
          margin-right: 16px;
          cursor: pointer;
        }
      }

      .activity-countdown {
        display: flex;
        align-items: center;
        padding: 7px 13px;
        border-radius: 10px;
        margin-top: 28px;
        background: linear-gradient(275deg, #F29130 0%, #F25130 100%);
        max-width: 540px;

        @media screen and (max-width: 1800px) {
          margin-top: 10px;
        }

        @media screen and (max-width: 991px) {
          width: 100%;
        }

        .count-down-icon {
          background: url("~/assets/images/activity/num.png") no-repeat;
          width: 35px;
          height: 35px;
          background-size: 100% 100%;

          @media screen and (max-width: 1800px) {
            width: 24px;
            height: 24px;
          }
        }

        .count-down-title {
          font-size: 20px;
          font-weight: normal;
          color: #ffffff;
          font-style: italic;

          @media screen and (max-width: 1800px) {
            font-size: 16px;
            display: none;
          }

          @media screen and (max-width: 991px) {
            display: block;
          }
        }

        .count-down-text {
          color: #ffffff;
          font-size: 16px;
          font-weight: 400;
          line-height: 28px;
          margin-left: auto;
          display: flex;
          align-items: center;

          .tips {
            @media screen and (max-width: 1500px) {
              display: none;
            }
          }

          .num {
            font-size: 20px;
            font-weight: bold;
            line-height: 28px;
            margin-left: 10px;

            @media screen and (max-width: 1500px) {
              font-size: 14px;
              margin-left: none;
            }
          }
        }
      }
    }
  }

  .activity-site {
    margin: 10px 0;
    display: flex;

    .site-title {
      width: 110px;
      font-size: 16px;
      font-weight: bold;
      line-height: 34px;
      color: #333;
    }

    .site-list {
      margin-left: 19px;
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      font-size: 20px;
      font-weight: bold;
      color: #0063E5;
      line-height: 34px;

      .site-card {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 8px 10px;
        background: rgba(0, 99, 229, 0.1);
        border: 1px solid #0063E5;
        color: #0063E5;
        border-radius: 10px;
        line-height: 24px;
        /* height: 64px; */
        width: 220px;
        font-size: 16px;
      }

      .ticker-type {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 8px 10px;
        color: #0063E5;
        border-radius: 10px;
        line-height: 24px;
        /* height: 64px; */
        width: 220px;
        font-size: 16px;
      }
    }
  }

  .activity-submit {
    display: flex;
    margin-top: 10px;
    align-items: center;

    @media screen and (max-width: 991px) {
      flex-wrap: wrap;
    }

    .site-title {
      width: 130px;
      font-size: 16px;
      font-weight: bold;
      line-height: 34px;
      color: #333;
    }

    .activity-submit-button {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 220px;
      height: 40px;
      color: #ffffff;
      border-radius: 60px;
      background: linear-gradient(260deg, #004FD9 0%, #33A0FF 96%);
      cursor: pointer;

      @media screen and (max-width: 991px) {
        width: 100%;
      }
    }

    .activity-submit-button-disabled {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 230px;
      height: 40px;
      color: #ffffff;
      border-radius: 60px;
      background: #b3babf;
      cursor: pointer;
    }

    .activity-advantage-list {
      display: flex;
      align-items: center;

      @media screen and (max-width: 991px) {
        margin-top: 10px;
        display: flex;
        justify-content: center;
        width: 100%;
      }


      .yes-icon {
        background: url("~/assets/images/activity/yes-icon.png") no-repeat;
        width: 22px;
        height: 18px;
        margin-right: 8px;
        flex-shrink: 0;
        margin-left: 30px;

        @media screen and (max-width: 991px) {
          margin-left: 10px;
        }
      }

      .activity-advantage-span {
        font-size: 18px;
        color: #333333;
      }
    }
  }

  .activity-poster-box {
    width: 100%;
    margin-top: 20px;

    img {
      width: 100%;
    }
  }
}

.right-activity-a-content {
  margin-left: 20px;
  width: 25%;

  @media screen and (max-width: 1200px) {
    display: none;
  }

  .right-a-box {
    padding: 10px;
    background: #ffffff;
    border-radius: 10px;
    margin-bottom: 20px;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);

    .right-a-box-title {
      font-size: 18px;
      font-weight: bold;
      line-height: 34px;
      display: flex;
      align-items: center;
    }

    .more-text {
      font-size: 16px;
      font-weight: 500;
      line-height: 24px;
      color: #0063E5;
      margin-left: auto;
      cursor: pointer;
    }

    .more-icon {
      background: url("~/assets/images/activity/arrow.png") no-repeat;
      width: 8px;
      height: 12px;
      margin-left: 5px;
    }

    .sp-box-row {
      display: inline-flex;
      flex-wrap: wrap;
      gap: 10px;
      width: 24%;

      .sponsor-logo {
        width: 100%;
        aspect-ratio: 1/1;
        img {
          width: 100%;
          height: 100%;
        }
      }

      .sp-text {
        font-size: 12px;
        text-align: center;
      }
    }

    .sp-box-single {
      display: flex;

      .sponsor-logo {
        width: 80px;
        height: 80px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        border-radius: 10px;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .sp-info {
        margin-left: 10px;

        .sponsor-title {
          font-size: 16px;
          font-weight: bold;
        }

        .sp-text {
          font-size: 14px;
          font-weight: normal;
          line-height: 24px;
          color: #A1A8AE;
        }
      }
    }

    .hot-activity-box {

      .hot-img {
        width: 100%;

        img {
          width: 100%;
          border-radius: 10px;
        }
      }

      .hot-title {
        font-size: 14px;
        font-weight: 500;
        line-height: 28px;
        margin-top: 6px;
        margin-bottom: 6px;
      }

      .active-info {
        display: flex;
        font-size: 14px;
        line-height: 20px;
        flex-direction: column;
        margin-bottom: 10px;
        color: #999999;
        position: relative;

        .info-item {
          display: flex;
        }

        .icon1 {
          background: url("~/assets/images/activity/card-icon1.png") no-repeat center;
          background-size: 14px 14px;
          width: 20px;
          height: 20px;
          margin-right: 7px;
          background-position-x: center;
          background-position-y: center;
        }

        .icon2 {
          background: url("~/assets/images/activity/card-icon2.png") no-repeat;
          background-size: 14px 14px;
          width: 20px;
          height: 20px;
          margin-right: 7px;
          background-position-x: center;
          background-position-y: center;
          flex-shrink: 0;
        }


      }

      .active-info-icon-list {
        display: flex;
        align-items: center;
        font-size: 14px;
        line-height: 20px;
        margin-bottom: 20px;
        color: #999999;
        position: relative;

        .submit {
          position: absolute;
          right: -10px;
          bottom: -20px;
          display: flex;
          justify-content: center;
          align-items: center;
          width: 80px;
          height: 30px;
          color: #ffffff;
          border-radius: 60px;
          border-top-right-radius: 0;
          border-bottom-right-radius: 0;
          background: linear-gradient(260deg, #004FD9 0%, #33A0FF 96%);
          cursor: pointer;

          @media screen and (max-width: 1300px) {
            width: auto;
            padding: 0 8px;
            height: 26px;
          }
        }

        .icon3 {
          background: url("~/assets/images/activity/card-icon3.png") no-repeat;
          width: 18px;
          height: 14px;
        }

        .icon4 {
          background: url("~/assets/images/activity/card-icon4.png") no-repeat;
          width: 15px;
          height: 14px;
        }

        .icon5 {
          background: url("~/assets/images/activity/card-icon5.png") no-repeat;
          width: 14px;
          height: 14px;
        }

        .num {
          margin-right: 10px;
          margin-left: 4px;
        }

        .check-btn {
          display: flex;
          justify-content: center;
          align-items: center;
          background: linear-gradient(255deg, #004FD9 1%, #33A0FF 96%);
          color: #ffffff;
          font-size: 14px;
        }
      }
    }
  }

}
</style>
<style></style>